<template>
  <div class="container">
    <div class="header">
      <div class="date" @click="openPurchase(false, sessionName)">
        <van-icon name="calendar-o" /><span>{{ sessionName }}</span
        ><van-icon name="arrow-down" class="arrow-down" />
      </div>
      <div class="ticketNumber" @click="openPurchase(true, sessionName, ticketNumber)">
        <van-icon name="contact-o" /> <span>{{ ticketNumber }}</span
        ><van-icon name="arrow-down" class="arrow-down" />
      </div>
    </div>

    <!-- 座位区域快捷选择 -->
    <!-- find_seat_plans -->
    <div class="seat-plans-list">
      <template v-for="seat in seatPlanList" :key="seat.seatPlanOID">
        <div class="seat-plans-item" :class="{ disabled: !seat.available }">
          <span class="dot" :style="{ 'background-color': seat.colorValue }"></span>
          <span>{{ seat.seatPlanName }}</span>
        </div>
      </template>
    </div>

    <!-- 座位SVG图 -->
    <SeatSvg />
    <!-- 座位选择组件 -->
    <SeatPlan />

    <Purchase
      ref="purchase"
      :showTicketNumber="showTicketNumber"
      :sessionName="sessionName"
      :ticketNumber="ticketNumber"
      :sessionId="sessionId"
      :adjacentSeat="adjacentSeat"
      :sessionActive="sessionActive"
      :numberActive="numberActive"
    />
  </div>
</template>

<script setup>
import SeatSvg from '@/component/selectSeat/seatSvg.vue'
import SeatPlan from '@/component/selectSeat/SeatPlan.vue'

import Purchase from '@/component/showDetail/Purchase.vue'

import { fetchTourSiteSessionSeatCount, fetchTourSiteTicketSeat } from '@/api/index.js'
import { ref, computed, watch, useTemplateRef } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const sessionActive = computed(() => route.query.sessionActive)
const numberActive = computed(() => route.query.numberActive)

const purchaseRef = useTemplateRef('purchase')

import { useStore } from '@/stores/index.js'
const store = useStore()

const ticketNumber = computed(() => store.purchaseInformation.ticketNumber)
const sessionName = computed(() => store.purchaseInformation.sessionName)
const sessionId = computed(() => store.purchaseInformation.sessionId)
const adjacentSeat = computed(() => store.purchaseInformation.adjacentSeat)
const showId = computed(() => store.purchaseInformation.showId)
const locationCityOID = computed(() => store.locationCity.locationCityOID)

const seatPlanList = ref([]) //快捷票面选座

//快捷票面选座
const getTourSiteTicketSeat = async (locationCityOID, showSessionId, ticketNumber) => {
  try {
    const { statusCode, data } = await fetchTourSiteTicketSeat(
      locationCityOID,
      showSessionId,
      ticketNumber,
    )
    if (statusCode === 200) {
      console.log(data)
      seatPlanList.value = data?.seatPlanList
    }
  } catch (error) {
    console.log('获取票面座位失败', error)
  }
}
watch(
  [sessionId, ticketNumber],
  async (newValues) => {
    await getTourSiteTicketSeat(locationCityOID.value, newValues[0], newValues[1])
  },
  {
    deep: true,
    immediate: true,
  },
)

const showTicketNumber = ref(true)

// 打开Purchase组件，不显示【选择数量】
const openPurchase = (bool) => {
  //是否显示【选择数量】
  showTicketNumber.value = bool

  // 弹出购买参数页面
  if (purchaseRef.value) {
    purchaseRef.value.openPopup()
  }
}
</script>

<style scoped lang="scss">
.container {
  .header {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    .date {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #eaeaea;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;

      .arrow-down {
        margin-left: auto;
        margin-right: 0;
      }
    }

    .ticketNumber {
      flex: 0 0 auto;
      padding: 8px 12px;
      border: 1px solid #eaeaea;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      .arrow-down {
        margin-left: auto;
        margin-right: 0;
      }
    }
  }

  .seat-plans-list {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px 10px;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;

    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .seat-plans-item {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      border: 1px solid #eaeaea;
      border-radius: 20px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 400;

      &.disabled {
        color: #ccc;
        border-color: #eaeaea;
        cursor: not-allowed;

        .dot {
          background-color: #ccc !important;
        }
      }

      .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #000;
        flex-shrink: 0;
      }

      span {
        white-space: nowrap; // 防止文字换行
        overflow: hidden;
      }
    }
  }
}
</style>
